<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Login Page</title>
    <link rel="stylesheet" href="component/pear/css/pear.css" />
    <link rel="stylesheet" href="admin/css/other/login.css" />
</head>
<!-- 代 码 结 构 -->
<body background="admin/images/background2.svg" style="background-size: cover;">
<form class="layui-form" action="javascript:void(0);">
    <div class="layui-form-item">
        <img class="logo" src="admin/images/logo.png" />
        <div class="title">Pear Admin</div>
        <div class="desc">
            明 湖 区 最 具 影 响 力 的 设 计 规 范 之 一
        </div>
    </div>
    <div class="layui-form-item">
        <input name="username" placeholder="账 户 : admin " value="admin" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input name="password" placeholder="密 码 : admin " value="admin" hover class="layui-input"  />
    </div>
    <div class="layui-form-item">
        <input placeholder="验证码 : " id="code" hover class="code layui-input layui-input-inline"  />
        <img src="/system/captcha/generate" class="codeImage" id="codeImage"/>
    </div>
    <div class="layui-form-item">
        <input type="checkbox" name="" title="记住密码" lay-skin="primary" checked>
    </div>
    <div class="layui-form-item">
        <button class="pear-btn pear-btn-success login" lay-submit lay-filter="login">
            登 入
        </button>
    </div>
</form>
<script src="component/layui/layui.js"></script>
<script>
    layui.use(['form','jquery','layer'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;

        form.on('submit(login)', function(data){
            let loader = layer.load();
            $(".login").html("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-icon-loading' />");

            // 验证二维码是否可用
            $.ajax({
                url:'/system/captcha/verify',
                data:{"code":$("#code").val()},
                type:"get",
                dataType: 'json',
                success: function(result){
                    if(result.success){
                        $.ajax({
                            url:'/login',
                            data:data.field,
                            type:"post",
                            dataType:'json',
                            success:function(result){
                                layer.close(loader);
                                if(result.success){
                                    layer.msg(result.msg,{icon:1,time:1000},function(){
                                        location.href = "/index";
                                    })
                                }else{
                                    layer.msg(result.msg,{icon:2,time:1000},function(){
                                        document.getElementById("codeImage").src="/system/captcha/generate?"+Math.random();
                                    });
                                }
                                $(".login").html("登 入")
                            }
                        });
                    }else{
                        layer.close(loader);
                        $(".login").html("登 入")
                        layer.msg(result.msg,{icon:2,time:1000},function(){
                            document.getElementById("codeImage").src="/system/captcha/generate?"+Math.random();
                        })
                    }
                }
            })
            return false;
        });

        $("#codeImage").click(function(){
            document.getElementById("codeImage").src="/system/captcha/generate?"+Math.random();
        })
    })
</script>
</body>
</html>